<template>
  <div class="outer">
    <div class="top-title">
      <span>{{localQuestion.title}}</span>
      <el-tag type="danger" v-if="localQuestion.must">(必做)</el-tag>
    </div>
    <div class="question">{{localQuestion.description}}</div>
    <div class="click-location" @click="handleLocation">
      <i class="el-icon-location-outline text"></i>
      <span v-if="!showLocation" class="text">点击获取当前位置</span>
      <span v-else class="text">{{locationFormat}}</span>
    </div>
  </div>
</template>

<script>
import { location } from "../../tool/lacation";

export default {
  name: "QitemLocation",
  data() {
    return {
      showLocation: false,
      localQuestion: this.question,
      localModel: {
        province: "",
        city: "",
        district: ""
      }
    };
  },
  computed: {
    locationFormat: function() {
      return (
        this.localModel.province +
        " " +
        this.localModel.city +
        " " +
        this.localModel.district
      );
    }
  },
  props: {
    question: {
      type: Object,
      default: function() {
        return {
          key: 1,
          order: 1,
          type: "location",
          must: true,
          title: "位置题",
          description: "填写位置信息",
          province: "",
          city: "",
          district: ""
        };
      }
    }
  },
  methods: {
    handleLocation() {
      this.$confirm("是否授权定位信息", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.getLocation();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "未授权定位信息!"
          });
        });
    },
    checkAnswer() {
      if (this.localQuestion.must == false) return true;
      return this.locationFormat != "";
    },
    getLocation() {
      let _that = this;
      let geolocation = location.initMap("map-container"); //定位
      AMap.event.addListener(geolocation, "complete", result => {
        console.log(result);
        _that.localModel.province = result.addressComponent.province;
        _that.localModel.city = result.addressComponent.city;
        _that.localModel.district = result.addressComponent.district;
        this.$emit("change", { type: "location", value: this.locationFormat });
        this.$message({
          type: "success",
          message: "获取定位成功!"
        });
        this.showLocation = true;
      });
    }
  },
  mounted() {
    console.log(this.question);
  }
};
</script>

<style scoped>
.el-tag.el-tag--danger {
  background-color: transparent;
  border: none;
  text-align: left;
}
.outer {
  width: 100%;
  /* background-color: aqua; */
}
.top-title {
  width: 100%;
  line-height: 32px;
  display: inline-block;
  text-align: left;
  padding: 0 0 0px 10px;
  font-weight: 700;
  box-sizing: border-box;
}
.question {
  width: 100%;
  /* background-color: turquoise; */
  text-align: left;
  padding-left: 10px;
  margin: 10px auto;
  margin-top: 3px;
  box-sizing: border-box;
}
.text {
  line-height: 40px;
}
.click-location {
  height: 40px;
  background-color: white;
  border-radius: 4px;
  border-color: black;
}
.click-location:hover {
  cursor: pointer;
  color: #2378ff;
}
</style>